<template>
	<view class="control">
		<view class="card">
			<view class="info-item">
				器材编号：1515154554
			</view>
			<view class="info-item">
				健身园：新北万达广场健身房
			</view>
			<view class="info-item">
				安装时间：2022-04-01 12:00:00
			</view>
			<view class="info-item">
				到期时间：2022-04-01 12:00:00
			</view>
		</view>
		<view class="card">
			<van-field label="报修类型" required>
				<template #input>
					<van-radio-group :value="form.type" @change="changeInput($event,'type')">
						<view class="flex-space-around radio-list">
							<van-radio icon-size="36rpx" :name="0">器材松动</van-radio>
							<van-radio icon-size="36rpx" :name="1">器材损坏</van-radio>
					 </view>
					</van-radio-group>
				</template>
			</van-field>
			<van-field :value="form.name" label="报修人" required placeholder="请输入报修人"
				@input="changeInput($event,'name')" />
			<van-field :value="form.phone" label="手机号" required placeholder="请输入手机号"
				@input="changeInput($event,'phone')" />
		</view>
		<view class="card">
			<view class="info-item" style="margin-bottom: 30rpx;">添加图片</view>
			<van-uploader @delete="deleteImg"  :deletable="true" :fileList="form.fileList" @after-read="afterRead" />
		</view>
		<view class="card">
			<view class="info-item" style="margin-bottom: 30rpx;">报修说明</view>
			<textarea v-model="form.note"></textarea>
		</view>
		
		<view class="footer" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					type: 0,
					name: '',
					phone: '',
					note: '',
					fileList: [
					   {
					        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
					  },
					  {
					        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
					  },
					] //图片列表
				}
			}
		},
		methods: {
			changeInput(event, type) {
				this.form[type] = event.detail
			},
			deleteImg(event){
			},
			submit(){
				let phonePatt =  /^1[3|4|5|8]\d{9}$/
				if(!this.form.name){
					uni.showToast({
						title:'报修人不能为空',
						icon:"error"
					})
				}else if(!phonePatt.test(this.form.phone)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:"error"
					})
				}else{
					uni.showToast({
						title:'提交成功',
					})
				}
			},
			//上传图片
			afterRead(event) {
				const {file} = event.detail;
				uni.uploadFile({
					url: 'http://ztao.club:82/home/upload/', // 仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success(res) {
						//返回接口全部东西，包含{code,msg,data}
					  },
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		height: 100vh;
		background-color: rgb(243, 243, 243);
		overflow: auto;
		padding: 20rpx 30rpx 190rpx;

		.card {
			padding: 30rpx 31rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 20rpx;
			margin-top: 20rpx;

			.info-item {
				color: rgb(51, 51, 51);
				font-size: 28rpx;

				&+.info-item {
					margin-top: 29rpx;
				}
			}
			textarea{
				font-size: 28rpx;
				height: 200rpx;
			}
			.radio-list {
				/deep/ .van-radio {
					margin-right: 20rpx;

					.van-radio__label {
						color: rgb(51, 51, 51);
						font-size: 26rpx;
					}
				}
			}
		}
		
		.footer{
			position: fixed;
			bottom: 30rpx;
			width: calc(100% - 60rpx);
			 padding: 20rpx 0 23rpx;
			 z-index: 10;
			  color: rgb(255,255,255);
			   font-size: 28rpx;
			   font-weight: 700;
			   text-align: center;
			   left: 30rpx;
			   background-image: linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(107, 157, 251) 100%);
			   border-radius: 60rpx;
		}
	}
</style>
